<template>
  <div class="page-container">
    <!-- 面包屑部分 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>组织中心</el-breadcrumb-item>
          <el-breadcrumb-item>素材管理</el-breadcrumb-item>
          <el-breadcrumb-item>分类管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="toolbar">
      <el-form :inline="true" :model="filters" ref="filters">
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              :label="$t('action.add')"
              type="primary"
              @click="handleAddFirst"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <el-table
        :data="tableData"
        row-key="categoryInfo.id"
        border
        :tree-props="{children: 'infoList', hasChildren: 'hasChildren'}">
        <el-table-column prop="categoryInfo.id" label="ID" ></el-table-column>
        <el-table-column prop="categoryInfo.categoryName" label="分类名称" sortable ></el-table-column>
        <el-table-column prop="categoryInfo.sort" label="排序" ></el-table-column>
        <el-table-column prop="categoryInfo.isShow" label="是否显示">
          <template slot-scope="scope">
            <span v-if="scope.row.categoryInfo.isShow">显示</span>
            <span v-else>不显示</span>
          </template>
        </el-table-column>
        <el-table-column prop="categoryInfo.creator" label="创建人" ></el-table-column>
        <el-table-column prop="categoryInfo.updateTime" label="发表时间" ></el-table-column>
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.categoryInfo.categoryLevel != 3"
              @click="handleAdd(scope.$index, scope.row)" type="text" class="btnText">添加</el-button>
            <el-button
              type="text"
              @click="handleEdit(scope.$index, scope.row)" class="btnText">编辑</el-button>
            <el-button
              type="text"
              @click="handleDelete(scope.$index, scope.row)" class="btnText">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--新增编辑界面-->
      <el-dialog
        class="el-dialog-style"
        :title="addTitle"
        :visible.sync="editDialogVisible"
        :close-on-click-modal="false"
      >
        <el-form :model="dataForm" :rules="dataFormRules" ref="dataForm" :size="size" label-width="130px">
          <el-row class="searchDialog-input">
            <el-form-item label="ID" prop="id" v-if="false">
              <el-input :disabled="true" v-model="dataForm.id" clearable placeholder="ID"></el-input>
            </el-form-item>
            <el-form-item label="父分类ID：" prop="parentCategoryId" v-if="false">
              <el-input v-model="dataForm.parentCategoryId" clearable placeholder="父分类ID"></el-input>
            </el-form-item>
            <el-form-item label="分类级别：" prop="categoryLevel" v-if="false">
              <el-input v-model="dataForm.categoryLevel" clearable placeholder="分类级别"></el-input>
            </el-form-item>
            <el-form-item label="分类名称：" prop="categoryName">
              <el-input v-model="dataForm.categoryName" clearable placeholder="分类名称"></el-input>
            </el-form-item>
            <el-form-item label="排序：" prop="sort">
              <el-input v-model="dataForm.sort" clearable placeholder="排序"></el-input>
            </el-form-item>
            <el-form-item label="是否显示：" prop="isShow">
              <el-switch
                v-model="dataForm.isShow"
                active-text="是"
                inactive-text="否">
              </el-switch>
            </el-form-item>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
          <el-button :size="size" @click="editDialogVisible = false" plain type="primary">{{$t('action.cancel')}}</el-button>
          <el-button
            :size="size"
            type="primary"
            @click="submitForm"
          >{{$t('action.submit')}}
          </el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>



<script>
  import KtButton from "@/views/Core/KtButton";

  export default {
    components: {
      KtButton
    },
    data() {
      return {
        size: "small",
        filters: {
          token: null
        },
        tableData: [],
        dataForm: {
          id: null,
          parentCategoryId: 0,
          categoryLevel: 1,
          categoryName: '',
          sort: '',
          isShow: true
        },
        dataFormRules: {
          categoryName: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
          sort: [{ required: true, message: "请输入排序", trigger: "blur" }]
        },
        addTitle: '',
        operateAction: 1, //1代表添加、2代表编辑
        editDialogVisible: false
      }
    },
    methods: {
      handleAddFirst(){
        this.addTitle = '添加分类';
        this.operateAction = 1;
        this.dataForm.id = 0;
        this.dataForm.parentCategoryId = 0;
        this.dataForm.categoryLevel = 1;
        this.dataForm.categoryName = '';
        this.dataForm.sort = '';
        this.dataForm.isShow = true;
        this.editDialogVisible = true;
      },
      handleAdd(index, row){
        this.addTitle = '添加分类';
        this.operateAction = 1;
        this.dataForm.id = 0;
        this.dataForm.parentCategoryId = row.categoryInfo.id; //父分类id其实是当前数据的id
        this.dataForm.categoryLevel = row.categoryInfo.categoryLevel + 1;
        this.dataForm.categoryName = '';
        this.dataForm.sort = '';
        this.dataForm.isShow = true;
        this.editDialogVisible = true;
      },
      handleEdit(index, row){
        this.addTitle = '编辑分类';
        this.operateAction = 2;
        this.dataForm.id = row.categoryInfo.id;
        this.dataForm.parentCategoryId = row.categoryInfo.parentCategoryId;
        this.dataForm.categoryLevel = row.categoryInfo.categoryLevel;
        this.dataForm.categoryName = row.categoryInfo.categoryName;
        this.dataForm.sort = row.categoryInfo.sort;
        this.dataForm.isShow = row.categoryInfo.isShow;
        this.editDialogVisible = true;
      },
      handleDelete(index, row){
        this.$confirm("确认删除选中记录吗？", "提示", {
          type: "warning"
        }).then(() => {
          let this_ = this;
          this_.dataForm.id = row.categoryInfo.id;
          if(this_.operateAction == 1) {
            this.utils.request.materialCategoryDelete(
              this_.dataForm,
              function (res) {
                if (res.code == "0000") {
                  this_.$message({message: "删除成功", type: "success"});
                  this_.queryPage();
                }else {
                  this_.$message({message: res.msg, type: "error"});
                }
              }
            );
          }
        })
          .catch(() => {
          });
      },

    // submitFormTimeout(){
    //   this.editDialogVisible = false;
    //     setTimeout(function () {
    //       this.submitForm();
    //   },1000);
    // },

    submitForm(){
    this.$refs.dataForm.validate(valid => {
      if (valid) {

        let this_ = this;
        //添加
        if (this_.operateAction == 1) {
            this.utils.request.materialCategoryAdd(
              this_.dataForm,
              function (res) {
                if (res.code == "0000") {
                  this_.editDialogVisible = false;
                  this_.$message({message: "添加成功", type: "success"});
                  this_.queryPage();
                }else {
                  this_.$message({message: res.msg, type: "error"});
                }
              }
            );
          //编辑
        } else {
          this.utils.request.materialCategoryEdit(
            this_.dataForm,
            function (res) {
              if (res.code == "0000") {
                this_.editDialogVisible = false;
                this_.$message({message: "编辑成功", type: "success"});
                this_.queryPage();
              }else {
                this_.$message({message: res.msg, type: "error"});
              }
            }
          );
        }
      }
    })
  },

  queryPage() {
    let this_ = this;
    this.utils.request.materialCategoryQueryPage(
      null,
      function (res) {
        if (res.code == "0000") {
          if(null != res.data){
            if(null != res.data.rows){
              this_.tableData = res.data.rows;

            }
          }
        }
      }
    );
  }

  },

  //初始化数据
  mounted() {
    console.log("初始化表格数据");
    this.queryPage();
  },
  }
</script>

<style scoped lang="scss">
  @import '../../../assets/css/public.scss';
/deep/ .el-switch {
  height: 32px;
  line-height: 32px;
}
/deep/ .el-switch__label {
  height: 32px;
  line-height: 32px;
}
/deep/ .el-input__inner{
  width: 100% !important;
}
 .search-button{
	 margin: 20px 0px 0px;
   padding-bottom: 20px;
    .el-form-item{
    margin-bottom: 0px !important;
  }
}

</style>
